<template>
  <div>
    <my-header></my-header>
    <!-- 中间部分 -->
    <div class="container">
      <!-- 面包屑导航 -->
      <div class="crumbs">
        <span><router-link to="/">结婚</router-link> ></span>
        <span><router-link to="/strategyindex"> 结婚攻略</router-link> ></span>
        <span v-show="categories" @click="changeCategory"
          ><router-link :to="`/list/${categories}`">{{
            categories
          }}</router-link>
          ></span
        >
        <span
          ><i>{{ cate }}</i></span
        >
      </div>
      <!-- 分类导航 -->
      <ul class="category clearfix" @click="changeCate">
        <li
          :class="{ subc: cate == zl.subcat }"
          v-for="(zl, i) of subcategory"
          :key="i"
        >
          <router-link :to="`/list/${zl.subcat}`">{{
            zl.subcat
          }}</router-link>
        </li>
      </ul>
      <!-- 主体内容 -->
      <div class="main clearfix">
        <!-- 左侧 -->
        <div class="left">
          <!-- 文章列表 -->
          <ul class="clearfix" v-for="(wz, i) of catelist" :key="i">
            <li>
              <router-link :to="`/scontent/${wz.yid}`"
                ><img :src="wz.pic" alt=""
              /></router-link>
            </li>
            <li class="title">
              <router-link
                :to="`/scontent/${wz.yid}`"
                class="stitle"
               
                >{{ wz.title }}</router-link
              >
            </li>
            <li class="time_scan">
              <span>发布日期：{{ wz.sendtime.slice(0, 10) }}</span>
              <span class="scan"><i></i>{{ wz.scan }}</span>
            </li>
            <li class="text">
              <router-link :to="`/scontent/${wz.yid}`">{{
                wz.content.replace(/<[^>]+>/g, "")
              }}</router-link>
            </li>
            <li class="slabel">
              <span v-for="(bq, i) of wz.label.split(',')" :key="i" v-show="bq">
                <img
                  src="https://qnm.hunliji.com/o_1dd2jt52d1tebdn0kd61tdc1qd3e.png"
                  alt=""
                />
                <a href="javascript:;">{{ bq }}</a>
              </span>
            </li>
          </ul>
          <!-- 点击加载更多 -->
          <div
            class="bottom"
            @click="loadmore"
            v-show="catelist.length >= 5 && catelist.length != alllist.length"
          >
            <span>加载更多</span>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="yzj_right clearfix">
          <!-- 搜索框 -->
          <div class="right_search" @keyup.13="loadSearch">
            <input type="text" placeholder="请输入攻略" v-model="search" />
            <a href="javascript:;" @click="loadSearch"></a>
          </div>
          <!-- 引入猜你想找 -->
          <strategy-label></strategy-label>
          <!-- 引入结婚美图 -->
          <great-photos></great-photos>
          <!-- 最新攻略 -->
          <div class="latest">
            <h3>最新攻略</h3>
            <!-- 最新列表 -->
            <ul class="latest_list">
              <li v-for="(xb, i) of newlist.slice(0, 6)" :key="i">
                <router-link :to="`/scontent/${xb.yid}`">{{
                  xb.title
                }}</router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
import strategyLabel from "../components/strategy/StrategyLabel";
import greatPhotos from "../components/strategy/GreatPhotos";
export default {
  components: {
    strategyLabel,
    greatPhotos,
  },
  props: ["cate"],
  data() {
    return {
      categories: "",
      subcategory: [],
      alllist: [],
      catelist: [],
      page: 1,
      pagesize: 6,
      peradd: 0,
      newlist: [],
      search: "",
    };
  },
  methods: {

    // 点击搜索攻略列表
    loadSearch() {
      if (this.search) {
        this.peradd = 0;
        let crumb = document.getElementsByClassName("crumbs")[0];
        let span = crumb.children;
        let navbar = document.getElementsByClassName("category")[0];
        span[2].style.display = "none";
        span[3].style.display = "none";
        navbar.style.display = "none";
        this.axios.get(`/strategy/search?search=${this.search}`).then((res) => {
          this.alllist = res.data;
          this.catelist = this.alllist.slice(
            (this.page - 1) * this.pagesize,
            (this.page - 1) * this.pagesize + 5
          );
        });
      }
    },

    // 点击加载更多
    loadmore() {
      if (this.alllist.length >= this.catelist.length) {
        this.peradd += 4;
        this.catelist = this.alllist.slice(
          (this.page - 1) * this.pagesize,
          (this.page - 1) * this.pagesize + 5 + this.peradd
        );
      }
    },

    // 判断参数是分类还是子类,再请求所有子分类和列表
    loadCate() {
      this.axios.get(`/strategy/subcat?category=${this.cate}`).then((res) => {
        // 如果用分类查询得到数据，则传来的是分类，否则传来的是子类
        if (res.data.length != 0) {
          // 对应分类的所有子类
          this.subcategory = res.data;
          // 对应分类的列表
          this.axios
            .get(`/strategy/clist?category=${this.cate}`)
            .then((res) => {
              this.alllist = res.data;
              this.catelist = this.alllist.slice(
                (this.page - 1) * this.pagesize,
                (this.page - 1) * this.pagesize + 5
              );
              res.data.forEach((wz) => {
                if (wz.pic) {
                  wz.pic = `${wz.pic}`;
                }
              });
            });
        } else {
          // 对应子类的分类
          this.axios
            .get(`/strategy/categories?subcat=${this.cate}`)
            .then((res) => {
              this.categories = res.data[0].category;
              // 对应所有子类
              this.axios
                .get(`/strategy/subcat?category=${this.categories}`)
                .then((res) => {
                  this.subcategory = res.data;
                });
              // 对应子类的列表
              this.axios
                .get(
                  `/strategy/slist?category=${this.categories}&subcat=${this.cate}`
                )
                .then((res) => {
                  this.alllist = res.data;
                  this.catelist = this.alllist.slice(
                    (this.page - 1) * this.pagesize,
                    (this.page - 1) * this.pagesize + 5
                  );
                  res.data.forEach((wz) => {
                    if (wz.pic) {
                      wz.pic = `${wz.pic}`;
                    }
                  });
                });
            });
        }
        document.title=`${this.cate}【婚礼纪】`
      });
    },

    // 点击切换子分类所在的文章列表
    changeCate(e) {
      if (e.target.nodeName == "LI") {
        this.cate = e.target.innerText;
        this.loadCate();
        this.loadRandomlabel();
      }
    },
    // 点击切换分类所在的文章列表
    changeCategory(e) {
      this.categories = "";
      this.cate = e.target.innerText;
      this.loadCate();
      this.loadRandomlabel();
    },

    // 加载最新攻略板块
    loadNewlist() {
      // 通过axios  发送ajax请求，访问类别列表
      this.axios.get("/strategy/newlist").then((res) => {
        this.newlist = res.data;
      });
    },
  },
  mounted() {
    // 加载所有子类和列表
    this.loadCate();

    // 加载最新攻略板块
    this.loadNewlist();
  },
};
</script>

<style scoped>
/* 袁自君补充的自己的公共样式 */
body {
  background-color: #fdfdfd;
}
a {
  text-decoration: none;
}
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
a,
span,
b,
i,
em {
  display: inline-block;
  font-style: normal;
}
/* 最新攻略板块样式 */
.latest_list {
  box-shadow: 0px 4px 28px rgb(0 0 0 / 12%);
  padding: 24px 24px 24px 22px;
}
.latest_list li {
  padding-left: 16px;
  position: relative;
  margin-bottom: 16px;
}
.latest_list li::before {
  position: absolute;
  content: "";
  left: 4px;
  top: 45%;
  transform: translateY(-50%);
  background: #666666;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  z-index: 100;
}
.latest_list li a {
  width: 258px;
  color: #333;
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.latest_list li a:hover {
  color: #f83244;
}

/* 面包屑导航样式 */
.crumbs {
  margin-top: 15px;
  margin-bottom: 20px;
  font-size: 12px;
  color: #999;
}
.crumbs span i {
  color: #333;
  font-style: normal;
}
.crumbs span a {
  color: #999;
}
.crumbs span a:hover {
  color: #f83244;
}

img {
  border: 0;
  vertical-align: middle;
}
img:hover {
  opacity: 0.8;
}
.container {
  width: 1200px;
  margin: 0 auto;
}

.category li {
  float: left;
}
.category li a {
  height: 40px;
  line-height: 40px;
  color: #000;
  padding: 0 20px;
  font-size: 14px;
  border-radius: 20px;
  background-color: #f5f5f5;
  margin-right: 10px;
  border: 1px solid #f5f5f5;
}
.category li.subc a {
  color: #f83244;
  border-color: #f83244;
}
.category li a:hover {
  color: #f83244;
  border-color: #f83244;
}

.left {
  width: 820px;
  float: left;
  padding-bottom: 80px;
}
.left ul {
  height: 152.33px;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 24px;
  margin-top: 30px;
}
.left ul li:first-child {
  float: left;
  margin-right: 30px;
}
.left ul li:first-child img {
  width: 230px;
  height: 144px;
}
.left ul li:not(:first-child) {
  width: 560px;
  float: right;
}
.left ul .title {
  width: 560px;
  height: 24px;
}
.left ul .title a.subcat {
  width: 60px;
  line-height: 24px;
  overflow: hidden;
  margin-right: 12px;
  border-radius: 3px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  background: #fe7e33;
}
.left ul .title a.subcat:hover {
  background: rgba(254, 126, 51, 0.85);
}
.left ul .title a.stitle {
  width: 450px;
  line-height: 24px;
  font-size: 20px;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
}
.left ul .title a.stitle:hover {
  color: #f83244;
}
.left ul .time_scan {
  padding-top: 12px;
  font-size: 12px;
  color: #666;
}
.left ul .time_scan .scan {
  float: right;
}
.left ul .time_scan .scan i {
  margin-right: 5px;
  margin-top: 1px;
  width: 16px;
  height: 14px;
  background: url(http://qnm.hunliji.com/o_1cjnffupn2qphg91mg2dhb1u8uf.png);
  float: left;
}

.left ul .text a {
  height: 48px;
  width: 100%;
  font-size: 14px;
  color: #444;
  line-height: 24px;
  margin-top: 12px;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.left ul .slabel {
  margin-top: 12px;
  display: flex;
}
.left ul .slabel span {
  display: flex;
  align-items: center;
  background: #ebf9ff;
  border-radius: 10px;
  height: 20px;
  padding: 0 7px 0 2px;
  margin-right: 12px;
}
.left ul .slabel img {
  height: 16px;
  width: 16px;
  margin: 0 3px 0 0px;
  vertical-align: middle;
}
.left ul .slabel a {
  color: #13acec;
  font-size: 12px;
}
.left ul .slabel a:hover {
  text-decoration: underline;
}

.bottom {
  width: 240px;
  height: 36px;
  background: #f5f5f5;
  text-align: center;
  line-height: 36px;
  margin: 0 auto;
  margin-top: 30px;
  border-radius: 2px;
}
.bottom span {
  color: #666;
  font-size: 14px;
}

.yzj_right {
  width: 320px;
  float: right;
  margin-top: 30px;
}
.yzj_right .right_search {
  border: 1px solid #f83244;
  border-radius: 2px;
  margin-bottom: 50px;
}
.yzj_right .right_search input {
  width: 243px;
  height: 34px;
  text-indent: 15px;
  color: #333;
  border: 0;
  outline: 0;
}
.yzj_right .right_search a {
  width: 35px;
  height: 34px;
  float: right;
  background: url(http://qnm.hunliji.com/o_1c2g31qukfcm9481ldd124fl667.jpg);
  cursor: pointer;
}

.latest {
  margin: 40px 0 120px;
}
.latest h3 {
  font-size: 24px;
  font-weight: normal;
  margin-bottom: 20px;
}
</style>

